<template>
  <BaseModal
    :visible="visibleModal"
    width="50%"
    title="更新用户信息"
    @handleCancel="handleCancel"
    @handleOk="handleOk"
  >
    <el-form ref="modelForm" class="modelForm" :rules="rules" :model="formData">
      <el-row>
        <el-col>
          <BaseRadioGroup
            label="邮件分类"
            prop="emailClassify"
            v-model="formData.emailClassify"
            :option="emailClassifyOptions"
          >
          </BaseRadioGroup>
          <BaseRadioGroup
            label="发送群体"
            prop="emailSendColony"
            v-model="formData.emailSendColony"
            :option="emailSendColonyOptions"
          >
          </BaseRadioGroup>
          <BaseInput
            label="发送人昵称"
            prop="emailSendUserName"
            v-model="formData.emailSendUserName"
          >
          </BaseInput>
          <BaseRadioGroup
            label="发送人性别"
            prop="emailSendUserSex"
            v-model="formData.emailSendUserSex"
            :option="sexOptions"
          >
          </BaseRadioGroup>
          <BaseInput
            label="接收人昵称"
            prop="emailReceivedName"
            v-model="formData.emailReceivedName"
          >
          </BaseInput>
          <BaseRadioGroup
            label="接收人性别"
            prop="emailReceivedSex"
            v-model="formData.emailReceivedSex"
            :option="sexOptions"
          >
          </BaseRadioGroup>
          <BaseInput
            label="接收人邮箱"
            prop="emailReceived"
            v-model="formData.emailReceived"
          >
          </BaseInput>
          <BaseRadioGroup
            label="即时发送"
            prop="emailImmediately"
            v-model="formData.emailImmediately"
            :option="emailImmediatelyOptions"
          >
          </BaseRadioGroup>
          <BaseDateTime
            v-show="formData.emailImmediately === 2"
            label="发送时间"
            prop="emailSendDate"
            type="datetime"
            placeholder="请选择发送时间"
            format="YYYY/MM/DD HH:mm:ss"
            value-format="YYYY/MM/DD HH:mm:ss"
            v-model="formData.emailSendDate"
          >
          </BaseDateTime>
          <BaseSelect
            label="邮件模版"
            v-model="formData.emailTemaplte"
            :options="emailTemaplteList"
          ></BaseSelect>
          <BaseEditor
            label="发送内容"
            prop="emailContent"
            v-model="formData.emailContent"
            height="300px"
            placeholder="请输入要发送的内容..."
          >
          </BaseEditor>
        </el-col>
      </el-row>
    </el-form>
  </BaseModal>
</template>

<script setup lang="ts" name="adminUserModal">
import { ref, onMounted } from "vue";
import * as api from "@/api/index";
import {
  BaseInput,
  BaseModal,
  BaseSelect,
  BaseRadioGroup,
  BaseDateTime,
} from "@components/BaseForm/index";
import type { FormInstance } from "element-plus";
import { ElMessage as message } from "element-plus";
import useUserStore from "@store/userStore";
import {
  emailClassifyOptions,
  emailSendColonyOptions,
  emailImmediatelyOptions,
  sexOptions,
} from "./map";
let userData: any = useUserStore().userInfo;
let emit = defineEmits(["refresh"]);
// form表单实例
let modelForm = ref<any>();
let formData = ref({
  emailClassify: 3,
  emailSendColony: 1,
  emailImmediately: 1,
  emailContent: "",
  emailSendDate: "",
  emailReceived: "",
  emailSendUserName: userData.userName,
  emailSendUserId: userData.userId,
  emailSendUserSex: 1,
  emailReceivedSex: 1,
  emailReceivedName: "",
  emailTemaplte: "",
});
let rules = ref({
  emailClassify: [{ required: true, message: "邮件分类不能为空" }],
  emailSendColony: [{ required: true, message: "发送群体为必填项" }],
  emailImmediately: [{ required: true, message: "该项为必填项、不能为空" }],
  emailContent: [{ required: true, message: "邮件内容不能为空" }],
  emailSendDate: [
    {
      required: formData.value.emailImmediately === 2,
      message: "发送时间不能为空",
    },
  ],
  emailReceived: [{ required: true, message: "接收人不能为空" }],
});

let visibleModal = ref(false);

// 模版类型
let emailTemaplteList = ref([]);

let handleShow = () => {
  visibleModal.value = true;
};

let handleCancel = () => {
  modelForm.value?.resetFields();
  visibleModal.value = false;
};

let getEmailTemplate = () => {
  api.admin.getEmailTemplate({}).then((res: any) => {
    if (res.header.code === 999) {
      emailTemaplteList.value = res.body.map((item: any) => {
        return [item.templateId, item.templateName];
      });
    }
  });
};

let handleOk = () => {
  modelForm.value?.validate((result: any, err: any) => {
    if (result) {
      api.admin.sendEmail(formData.value).then((res: any) => {
        if (res.header.code === 999) {
          message.success("邮件新增成功！");
          emit("refresh");
          handleCancel();
        } else {
          message.error(res.header.message);
        }
      });
    }
  });
};

onMounted(() => {
  getEmailTemplate();
});

defineExpose({
  handleShow,
});
</script>

<style lang="less" scoped>
:deep(.el-radio.el-radio--large) {
  height: 32px;
}
</style>
